<template>
	<div class="js">
		<div class="dd_js">
			<div class="dd_left">
				<yd-icon
					name="phone2"
					size=".4rem"
					color="#FF685D"
				></yd-icon>
				<span>联系商家</span>
			</div>
			<div class="comten">
				<div>
					<img
						src="../../static/images/organize_team/gwc.png"
						alt=""
					>
					<yd-badge
						type="danger"
						class="er"
					>{{goods_num}}</yd-badge>
				</div>
				<div class="je">
					<span style="color:#fff;font-size:0.35rem;">合计￥{{total_price}}</span>
				</div>
			</div>
			<div
				class="dd_right"
				@click="settlement"
			>
				<span>去结算</span>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: "Settlement",
	props:{
        shid:{
			type:Number,
		}
	},
	data () {
		return {
			goods_num: 0,
			total_price: 0
		}
	},
	computed: {
		...mapGetters(['account_select_menu', 'order_id', 'share_id', 'organize_type'])
	},
	watch: {
		/*
		* 深度监听用户选择的菜品
		* 作者：gzt
		* 时间：2019-11-24 13:09:39
		*/
		'account_select_menu': {
			handler: function (new_val, old_val) {
				this.total_price = 0
				this.goods_num = 0
				for (const item of new_val) {
					this.goods_num += item.num
					var price = item.num * item.price
					this.total_price += price
				}
			},
			deep: true,
		}
	},
	methods: {
		/*
		* 结算当前的商品数据
		* 保存当前用户所选择的商品，跳转至用户组队页
		* 作者：gzt
		* 时间：2019-11-24 13:28:31
		*/
		//判断订单是否存在
		settlement () {
			//1. 判断是否存在订单id
			if (this.order_id == 0) {
				//2. 判断是否选择过组队的类型
				if (this.organize_type == '' || this.organize_type == null) {
					//跳转2.1弹框选择组队的类型
					this.tanchang();
				}else{
					this.getorder(this.organize_type);
				}
				//3. 发送生成订单

				//3.1 保存当前订单id
			// this.$store.commit('ORDER_ID',0 )
			// 	//3.2 保存用户选择的商品数据
			// 	this.save_account_select_menus()

			} else {
				// 4. 直接保存用户的数据并跳转至组队页面
				this.save_account_select_menus();
			}
		},
        // 2.1用户选择组队类型
        tanchang (){
		this.$dialog.confirm({
				title: '请选择',
				mes: '请选择您的用餐类型！',
				opts: [
					{
						txt: 'AA制',
						color: '#3296fe',
						callback: () => {
						this.$store.commit('ORGANIZE_TYPE', 'AA');
						//用户选择了AA类型
						//2.2发送生成订单号
						this.getorder(this.organize_type);
						}
					},
					{
						txt: '做东',
						color: true,
						callback: () => {
						this.$store.commit('ORGANIZE_TYPE', '庄家');
						//用户选择了庄家类型
						//2.2发送生成订单号
						this.getorder(this.organize_type);
						}
					}
				]
			});
		},
        // 2.2生成订单
		getorder(types){
			let _this = this;
			if(types=='AA'){
               types=1;
			}else{
               types=0;
			}
			let num = Number(this.shid);
            this.$post(this.$api.organizeteam.create_order, {
				isAa: types,
				bussinesId:num,
				orderId:0,
			}).then(res => {
                if(res.success){
					//2.3保存订单号
					this.$store.commit('ORDER_ID',res.data )
				   alert(_this.order_id);
				   //2.4 获取已选的菜品并跳转至组队房间
				   _this.save_account_select_menus();
				}else{
					_this.$store.commit('ORGANIZE_TYPE', '');
					_this.$dialog.toast({
                    mes: '创建订单失败！',
                    timeout: 1000,
                    icon: 'error',
                    callback: () => {
                        setTimeout(() => {
							this.$dialog.loading.close();
						}, 2000);
                    }
				});
				return false;
				}
			}).catch(res => {
				_this.$store.commit('ORGANIZE_TYPE', '');
                _this.$dialog.toast({
                    mes: '网络异常！',
                    timeout: 1000,
                    icon: 'error',
                    callback: () => {
                        setTimeout(() => {
							this.$dialog.loading.close();
						}, 2000);
                    }
                });
			});
		},
		/*
		* 保存用户选择的菜单数据
		* 作者：gzt
		* 时间：2019-11-25 20:52:06
		*/
		save_account_select_menus () {
			let request_data = {
				goods_num: this.goods_num,
				total_price: this.total_price,
				details: this.account_select_menu
			}
			// this.$post(this.$api.organizeteam.save_user_select_menus, request_data)
			// 	.then(res => {
			// 		// 保存成功后，跳转至组队页面
			this.$router.push({
				path: '/team_detail'
			})
			// 	});
		}

	}
}
</script>

<style lang="less" >
.js {
	background: #fff;
	padding: 0.3rem;
	position: fixed;
	bottom: 0rem;
	width: 100%;
}

.dd_js {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 20px;
	height: 1rem;
}

.dd_left {
	display: flex;
	height: 1rem;
	width: 20%;
	font-size: 0.2rem;
	flex-direction: column;
	background: rgb(238, 160, 42);
	border-top-left-radius: 5em;
	border-bottom-left-radius: 5em;
}

.comten {
	height: 1rem;
	width: 60%;
	background: rgb(37, 37, 37);
	display: flex;
	align-items: center;
	justify-content: center;
}

.comten img {
	height: 0.6rem;
}

.je {
	display: flex;
	flex-direction: column;
	color: #999;
	font-size: 0.2rem;
}

.dd_right {
	height: 1rem;
	width: 20%;
	color: #fff;
	font-size: 0.3rem;
	align-items: center;
	display: flex;
	padding: 0.2rem;
	background: rgb(233, 48, 88);
	border-top-right-radius: 5em;
	border-bottom-right-radius: 5em;
}

.er {
	position: relative;
	top: -0.3rem;
	left: -0.1rem;
}
</style>
